<!DOCTYPE html>
<head>
	<title>inzyme</title>
	<script type="text/javascript" src="/js/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="/js/jquery-ui-1.10.3.min.js"></script>
	<link rel="stylesheet" href="/style/login.css" type="text/css">

<script type="text/javascript">
$(function(){

	// A helper that checks for 3D CSS3 transformations support.
    function supportsCSS3D() {
        var props = [
            'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
        ], testDom = document.createElement('a');
        for(var i=0; i<props.length; i++){
            if(props[i] in testDom.style) return true;
        }
        return false;
    }
    $.support.css3d = supportsCSS3D();

    var formContainer = $('#formContainer');

    $('#flip_link').click(function(e){
		formContainer.css('height', '275px');
		formContainer.toggleClass('flipped');

        // If there is no CSS3 3D support, simply
        // hide the login form (exposing the register one)
        if(!$.support.css3d){
            $('#login').toggle();
        }
        e.preventDefault();
    });
	
	$('#login').submit(function(event) {
		event.preventDefault();
		$.post($(this).attr('action'), $(this).serialize(), function(d) {
			if (d.success) {
				window.location = '/';
			} else {
				//$('#formContainer').effect('shake');
				$('input[type=text], input[type=password]')
					.css('background-color', '#faa')
					.animate({'background-color': 'white'}, 400);
			}
		});
		return false;
	});
	
	$('#register').submit(function(event) {
		event.preventDefault();
		$.post($(this).attr('action'), $(this).serialize(), function(d) {
			if (d.success) {
				window.location = '/';
			} else {
				//$('#formContainer').effect('shake');
				$('input[type=text], input[type=password]')
					.css('background-color', '#faa')
					.animate({'background-color': 'white'}, 400);
			}
		});
		return false;
	});

});
</script>

</head>

<body>

<div id="formContainer">
	<form id="login" method="post" action="/login_user">
		<h1>Sign In</h1>
		<input autofocus type="text" name="email" placeholder="Email" />
		<input type="password" name="password" placeholder="Password" />
		<input type="submit" id="login_submit" value="Login" />
		<p><a id="flip_link" href="#">Don't have an account? Register here.</a></p>
	</form>
	
	<form id="register" method="post" action="/register_user">
		<h1>Register new account</h1>
		<input type="text" name="full_name" placeholder="Full name" />
		<input type="text" name="email" placeholder="Email" />
		<input type="password" name="password" placeholder="Password" />
		<input type="submit" id="register_submit" value="Create account" />
	</form>
</div>

</body>
